<!--g6-->
<template>
    <div id="mountNode" class="g6-container">
        g6-container
    </div>
</template>

<script>
    import G6 from '@antv/g6';
    import axios from 'axios';
    //console.log('G6',G6);
    export default{
        name: 'G6Editor',
        data() {
            let data = {
                nodes: [
                    {
                        id: 'node1',
                        x: 100, //节点位置的x值
                        y: 200, //节点位置的y值
                        label: '起始点',
                    },
                    {
                        id: 'node2',
                        x: 300,
                        y: 200,
                        label: '目标点',
                    }
                ],
                //边集
                edges: [
                    {
                        source: 'node1', //必须，起始点 id
                        target: 'node2', //必须，目标点 id
                        label: '我是连线'
                    },

                ]
            }
            return {
                data: data,
            }
        },
        mounted() {
//            const main = async ()=> {
//                const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json')
//            }
            axios.get('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json')
                .then(res=>{
                    console.log('res',res);
                    this.data = res.data;
                    const graph = new G6.Graph({
                        container: 'mountNode',
                        width: 800,
                        height: 500,
                    })
                    graph.data(this.data);
                    graph.render();
                }).catch(err=>{
                    console.log('err',err);
                })
            //const remoteData = await response.json();
        }
    }
</script>

<style lang="scss">
    .g6-container {

    }
</style>